<template>
	<div>
		<mj-title type="h2" title="Grid 栅格"></mj-title>
		<mj-title type="h5" title="概述"></mj-title>
		<div class="page-desc">
			<p>栅格化设计是按照一定的规则把页面分成固定的相同宽度，然后列出各种组合的可能性，以便于在进行页面呈现的时候能够快速的进行布局。</p>
			<p>我们采用了12列栅格系统，将区域12等分。同时根据分辨率自动进行适配排列。</p>
		</div>

		<mj-tabs class="mb50">
			<mj-tab-pane label="示例1" name="html">
				<mj-row gutter="20" class="demo-row-1">
					<mj-col sm="2"><div>col-sm-2</div></mj-col>
					<mj-col sm="2"><div>col-sm-2</div></mj-col>
					<mj-col sm="2"><div>col-sm-2</div></mj-col>
					<mj-col sm="2"><div>col-sm-2</div></mj-col>
					<mj-col sm="2"><div>col-sm-2</div></mj-col>
					<mj-col sm="2"><div>col-sm-2</div></mj-col>
					<mj-col md="3"><div>col-md-3</div></mj-col>
					<mj-col md="3"><div>col-md-3</div></mj-col>
					<mj-col md="3"><div>col-md-3</div></mj-col>
					<mj-col md="3"><div>col-md-3</div></mj-col>
					<mj-col lg="6"><div>col-lg-6</div></mj-col>
					<mj-col lg="6"><div>col-lg-6</div></mj-col>
				</mj-row>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
					  &lt;mj-row gutter="20">
					  	&lt;mj-col sm="2">&lt;div>col-sm-2&lt;/div>&lt;/mj-col>
					  	&lt;mj-col sm="2">&lt;div>col-sm-2&lt;/div>&lt;/mj-col>
					  	&lt;mj-col sm="2">&lt;div>col-sm-2&lt;/div>&lt;/mj-col>
					  	&lt;mj-col sm="2">&lt;div>col-sm-2&lt;/div>&lt;/mj-col>
					  	&lt;mj-col sm="2">&lt;div>col-sm-2&lt;/div>&lt;/mj-col>
					  	&lt;mj-col sm="2">&lt;div>col-sm-2&lt;/div>&lt;/mj-col>
					    &lt;mj-col md="3">&lt;div>col-md-3&lt;/div>&lt;/mj-col>
					    &lt;mj-col md="3">&lt;div>col-md-3&lt;/div>&lt;/mj-col>
					    &lt;mj-col md="3">&lt;div>col-md-3&lt;/div>&lt;/mj-col>
					    &lt;mj-col md="3">&lt;div>col-md-3&lt;/div>&lt;/mj-col>
					    &lt;mj-col lg="6">&lt;div>col-lg-6&lt;/div>&lt;/mj-col>
					    &lt;mj-col lg="6">&lt;div>col-lg-6&lt;/div>&lt;/mj-col>
					  &lt;/mj-row>
					&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="Flex 布局"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="示例1" name="html">
				<mj-divider>flex-start</mj-divider>
				<mj-row justify="start" class="demo-row-2">
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
				</mj-row>
				<mj-divider>center</mj-divider>
				<mj-row justify="center" class="demo-row-2">
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
				</mj-row>
				<mj-divider>flex-end</mj-divider>
				<mj-row justify="end" class="demo-row-2">
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
				</mj-row>
				<mj-divider>space-around</mj-divider>
				<mj-row justify="space-around" class="demo-row-2">
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
				</mj-row>
				<mj-divider>space-between</mj-divider>
				<mj-row justify="space-between" class="demo-row-2">
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
				</mj-row>
				<mj-divider>Align Top</mj-divider>
				<mj-row justify="center" align="start" class="demo-row-3">
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
				</mj-row>
				<mj-divider>Align Center</mj-divider>
				<mj-row justify="center" align="center" class="demo-row-3">
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
				</mj-row>
				<mj-divider>Align Bottom</mj-divider>
				<mj-row justify="center" align="end" class="demo-row-3">
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
					<mj-col>column</mj-col>
				</mj-row>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-divider>flex-start&lt;/mj-divider>
						&lt;mj-row justify="start" class="demo-row-2">
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
						&lt;/mj-row>
						&lt;mj-divider>center&lt;/mj-divider>
						&lt;mj-row justify="center" class="demo-row-2">
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
						&lt;/mj-row>
						&lt;mj-divider>flex-end&lt;/mj-divider>
						&lt;mj-row justify="end" class="demo-row-2">
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
						&lt;/mj-row>
						&lt;mj-divider>space-around&lt;/mj-divider>
						&lt;mj-row justify="space-around" class="demo-row-2">
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
						&lt;/mj-row>
						&lt;mj-divider>space-between&lt;/mj-divider>
						&lt;mj-row justify="space-between" class="demo-row-2">
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
						&lt;/mj-row>
						&lt;mj-divider>Align Top&lt;/mj-divider>
						&lt;mj-row justify="center" align="start" class="demo-row-3">
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
						&lt;/mj-row>
						&lt;mj-divider>Align Center&lt;/mj-divider>
						&lt;mj-row justify="center" align="center" class="demo-row-3">
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
						&lt;/mj-row>
						&lt;mj-divider>Align Bottom&lt;/mj-divider>
						&lt;mj-row justify="center" align="end" class="demo-row-3">
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
							&lt;mj-col>column&lt;/mj-col>
						&lt;/mj-row>
					&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Row props"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>gutter</td>
					<td>栅格间隔，10~30的偶数</td>
					<td>Number</td>
					<td>-</td>
				</tr>
				<tr>
					<td>justify</td>
					<td>flex 布局下的水平排列方式，可选值为<code>start</code>、<code>end</code>、<code>center</code>、<code>space-around</code>、<code>space-between</code></td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>align</td>
					<td>flex 布局下的垂直对齐方式，可选值为<code>top</code>、<code>center</code>、<code>bottom</code></td>
					<td>String</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Col props"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>sm</td>
					<td><code>屏幕&lt;800px</code>响应式栅格，可为栅格数或一个包含其他属性的对象</td>
					<td>Number</td>
					<td>-</td>
				</tr>
				<tr>
					<td>md</td>
					<td><code>屏幕≥1100px</code>响应式栅格，可为栅格数或一个包含其他属性的对象</td>
					<td>Number</td>
					<td>-</td>
				</tr>
				<tr>
					<td>lg</td>
					<td><code>屏幕≥1400px</code>响应式栅格，可为栅格数或一个包含其他属性的对象</td>
					<td>Number</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<style scoped>
.demo-row-1 > div > div {background: var(--blue);color:var(--white);display: flex;align-items:center;justify-content: center;height:50px;border-radius:5px;}
.demo-row-2 {background: var(--lightgray);}
.demo-row-2 > div {color:var(--white);padding:10px 20px;}
.demo-row-2 > div:nth-child(even) {background: var(--blue);}
.demo-row-2 > div:nth-child(odd) {background: var(--royalblue);}
.demo-row-3 {background: var(--lightgray);}
.demo-row-3 > div {color:var(--white);padding:10px 50px;}
.demo-row-3 > div:nth-child(even) {background: var(--blue);}
.demo-row-3 > div:nth-child(odd) {background: var(--royalblue);}
.demo-row-3 > div:nth-child(1) {height:50px;}
.demo-row-3 > div:nth-child(2) {height:100px;}
.demo-row-3 > div:nth-child(3) {height:65px;}
.demo-row-3 > div:nth-child(4) {height:88px;}
</style>